<template>
  <el-container class="home-container">
    <el-header height="80px">
      <div class="logo">
        <h1>小彭商城后台系统</h1>
        <i
          @click="btnOpenAndDown"
          v-bind:class="[
            isCollapse ? 'el-icon-s-unfold' : 'el-icon-s-fold',
            'iconBtn',
          ]"
        ></i>
      </div>
      <div class="userInfo">
        <el-badge :value="3" class="item">
          <el-avatar size="small" icon="el-icon-user-solid"></el-avatar>
        </el-badge>
        <el-dropdown :hide-on-click="false">
          <span class="el-dropdown-link">
            <p style="margin: 0 10px">{{username}} | 管理员角色</p>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>修改密码</el-dropdown-item>
            <el-dropdown-item @click.native="loginOut"
              >退出登录</el-dropdown-item
            >
          </el-dropdown-menu>
        </el-dropdown>
      </div>
      <div class="timmerClass">
        <p>{{ timmer }}</p>
      </div>
    </el-header>
    <el-container>
      <el-menu
        v-bind:class="{ asideEL: !isCollapse }"
        :default-active="avtivePath"
        class="el-menu-vertical-demo"
        @open="handleOpen"
        @close="handleClose"
        :collapse="isCollapse"
        unique-opened
        router
      >
        <el-submenu
          :index="menu.id + ''"
          v-for="(menu, index) in menuListSimun"
          :key="menu.id"
        >
          <!-- 一级菜单 -->
          <template slot="title">
            <i :class="iconArr[index]"></i>
            <span slot="title">{{ menu.authName }}</span>
          </template>
          <!-- 二级菜单 -->
          <el-menu-item
            :index="'/' + menuItem.path"
            @click="avtivePathMethod('/' + menuItem.path)"
            v-for="menuItem in menu.children"
            :key="menuItem.id"
          >
            <template slot="title">
              <i class="el-icon-s-grid"></i>
              <span slot="title">{{ menuItem.authName }}</span>
            </template>
          </el-menu-item>
        </el-submenu>
      </el-menu>
      <!-- </el-aside> -->
      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import { formatTimeToStr } from '@/util/data.js'
import { queryMenuList } from '@/api/index.js'
export default {
  data() {
    return {
      // 时间戳
      timmer: formatTimeToStr(new Date().getTime()),
      // 左侧的收缩动画
      isCollapse: false,
      // 选中的二级菜单的index
      avtivePath: '',
      // 菜单列表
      menuListSimun: [],
      // 一级菜单图标
      iconArr: [
        'el-icon-s-custom',
        'el-icon-s-check',
        'el-icon-shopping-bag-1',
        'el-icon-shopping-cart-full',
        'el-icon-message',
      ],
      // 用户名
      username:""
    }
  },
  methods: {
    loginOut() {
      sessionStorage.clear()
      this.$router.push('/login')
    },
    setimmer() {
      setInterval(() => {
        this.timmer = formatTimeToStr(new Date().getTime())
      }, 1000)
    },
    btnOpenAndDown() {
      this.isCollapse = !this.isCollapse
    },
    handleOpen(key, keyPath) {
      console.log(key, keyPath)
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath)
    },
    async menuList() {
      let res = await queryMenuList()
      this.menuListSimun = res.data
      console.log(this.menuListSimun)
    },
    // // 点击激活设置
    avtivePathMethod(avtivePath) {
      window.sessionStorage.setItem('avtivePath', avtivePath)
      this.avtivePath = avtivePath
    },
  },
  // 初始化过程 相当于angular中的nginit
  created: function () {
    this.setimmer()
    this.menuList()
    this.avtivePath = window.sessionStorage.getItem('avtivePath')
    this.username = JSON.parse(window.sessionStorage.getItem('userInfo')).username
  },
}
</script>

<style lang="less" scoped>
.home-container {
  height: 100%;
}
.asideEL {
  min-width: 227px;
}
.el-header {
  background: black;
  .logo {
    color: white;
    line-height: 40px;
    position: absolute;
    left: 15px;
    .iconBtn {
      position: absolute;
      top: 30px;
      left: 205px;
    }
  }
  .userInfo {
    color: white;
    position: absolute;
    right: 20px;
    top: 20px;
    .el-dropdown-link {
      color: white !important;
    }
  }
  .timmerClass {
    color: white;
    position: absolute;
    right: 40px;
    top: 40px;
    font-size: 12px;
  }
}
.el-aside {
  border-top: 1.5px solid white;
  background: black;
}
</style>